<template>
	<div class="order">
		<cl-crud @load="onLoad">
			<template #slot-layout-top>
				<commission-count ref="commission-count"></commission-count>
			</template>
			<template #slot-datepicker>
				<div class="_top-filter">
					<div style="width:125px;">
						<el-select
							size="mini"
							class="time-type"
							v-model="selects.timeType"
							@change="val => refresh({ timeType: val, page: 1, sort: 'desc' })"
						>
							<el-option label="创建时间" :value="0"></el-option>
							<el-option label="付款时间" :value="1"></el-option>
							<el-option label="结算时间" :value="2"></el-option>
						</el-select>
					</div>
					<div style="width:350px;">
						<date-picker
							style="width:350px;"
							:datas="datas"
							@change="
								val => refresh({ startTime: val[0], endTime: val[1], page: 1 })
							"
							@refresh="refresh({ startTime: '', endTime: '', page: 1 })"
						></date-picker>
					</div>
					<div>
						<select-taobao
							class="selects"
							v-model="selects.pid"
							@change="val => taobaoIdrefresh({ taobaoId: val, page: 1 })"
						></select-taobao>
					</div>
					<!-- 标签类型 -->
					<div>
						<span class="label-name">标签类型</span>
					</div>
					<div>
						<el-select
							v-model="selects.labelType"
							size="mini"
							class="label-type"
							@change="val => refresh({ labelType: val, page: 1 }, 'labelType')"
						>
							<el-option
								v-for="(item, index) in labelTypeList"
								:key="index"
								:label="item"
								:value="index"
							></el-option>
						</el-select>
					</div>
					<!-- 标签 -->
					<div>
						<el-select
							v-model="selects.label"
							size="mini"
							class="time-type"
							@change="val => refresh({ label: options.label[val], page: 1 })"
						>
							<el-option label="全部标签" value></el-option>
							<el-option
								v-for="(item, index) in options.label"
								:key="index"
								:label="item"
								:value="index"
							></el-option>
						</el-select>
					</div>
					<!-- 导出表格 -->
					<el-button
						@click="labelsExport"
						v-permission="$service.order.permission.labelsExport"
						type="primary"
						style="margin-left:10px"
						size="mini"
					>
						<i class="el-icon-download"></i>导出报表
					</el-button>
				</div>
			</template>
			<template #table-column-salesRate="{scope}">
				<div :class="scope.row.salesStatus == 1 ? 'sales-top' : 'sales-bottom'">
					<span>{{ scope.row.salesRate }}%</span>
					<i class="el-icon-bottom" v-if="!scope.row.salesStatus"></i>
					<i class="el-icon-top" v-else></i>
				</div>
			</template>

			<template #table-column-tkStatus="{scope}">
				<el-tag size="small" type="warning" v-if="scope.row.tkStatus == 3">订单结算</el-tag>
				<el-tag size="small" v-if="scope.row.tkStatus == 12">订单付款</el-tag>
				<el-tag size="small" type="info" v-if="scope.row.tkStatus == 13">订单失效</el-tag>
				<el-tag size="small" type="success" v-if="scope.row.tkStatus == 14"
					>订单成功</el-tag
				>
			</template>
			<template #table-column-label="{scope}">
				<div style="color: #ff4400; cursor: pointer;" @click="toDetail(scope.row)">
					{{ scope.row.label }}
				</div>
			</template>
			<template #table-column-labelName>
				<div>{{ labelTypeList[selects.labelType] }}</div>
			</template>
		</cl-crud>
	</div>
</template>
<script>
import commissionCount from '@/components/order/commission-count.vue';
import DatePicker from '@/components/order/date-picker';
import SelectTaobao from '@/components/order/select-taobao';
import { dateFormat, download } from '@/utils/index';
import moment from 'moment';
export default {
	data() {
		return {
			crud: null,
			selects: {
				timeType: 0,
				pid: '',
				positionId: '',
				staffId: '',
				tkStatus: '',
				label: '',
				labelType: 0
			},
			datas: [this.$route.query.startTime, this.$route.query.endTime],
			params: {
				timeType: 0,
				labelType: 0,
				startTime: this.$route.query.startTime,
				endTime: this.$route.query.endTime
			},
			labelTypeList: ['推广位标签', '员工标签', '渠道标签'],
			options: {
				label: []
			}
		};
	},
	components: {
		commissionCount,
		DatePicker,
		SelectTaobao
	},
	created() {
		this.getLabelList();
	},
	methods: {
		onLoad({ ctx, app }) {
			this.crud = app;
			ctx.service(this.$service.order)
				.set('dict', {
					api: {
						list: 'list', // 全部数据
						add: 'add', // 新增
						update: 'update', // 修改
						delete: 'delete', // 删除
						info: 'info', // 详情
						page: 'labelsStatistics' // 分页
					},
					search: {
						query: 'salesStatus'
					}
				})
				.set('table', {
					columns: [
						{
							type: 'index',
							align: 'center',
							label: '序号',
							width: 80
						},
						{
							label: '标签名称',
							prop: 'label',
							align: 'center',
							minWidth: 160
						},
						{
							label: '标签类型',
							prop: 'labelName',
							align: 'center',
							minWidth: 140
						},
						{
							label: '全部单数',
							prop: 'orderNum',
							align: 'center',
							minWidth: 200,
							sortable: true
						},
						{
							label: '有效单数',
							prop: 'validOrderNum',
							align: 'center',
							emptyText: '无',
							minWidth: 140,
							sortable: true
						},
						{
							label: '失效单数',
							prop: 'invalidOrderNum',
							align: 'center',
							emptyText: '无',
							minWidth: 140,
							sortable: true
						},
						{
							label: '预估收入',
							prop: 'pubSharePreFee',
							align: 'center',
							minWidth: 140,
							sortable: true
						},
						{
							label: '有效佣金',
							prop: 'validCommission',
							align: 'center',
							emptyText: '无',
							minWidth: 140,
							sortable: true
						},
						{
							label: '失效佣金',
							prop: 'invalidCommission',
							align: 'center',
							minWidth: 140,
							sortable: true
						},
						{
							label: '结算预估',
							prop: 'pubShareFee',
							align: 'center',
							minWidth: 140,
							sortable: true
						}
					],
					props: {
						'default-sort': {
							order: 'descending',
							prop: 'validCommission'
						}
					},
					op: {
						visible: false
					},
					on: {}
				})
				.set('search', {
					key: {
						placeholder: '请输入商品标题、商品ID、订单编号'
					}
				})
				.set('layout', [
					['refresh-btn', 'slot-datepicker', 'flex1'],
					['slot-layout-top'],
					['data-table'],
					['flex1', 'pagination']
				])
				.on('refresh', async (params, { next }) => {
					this.params = params;
					const { list, subData } = await next(params);
					list.map(e => {
						e.pubSharePreFee = e.pubSharePreFee.toFixed(2);
						e.pubShareFee = e.pubShareFee.toFixed(2);
						e.invalidCommission = e.invalidCommission.toFixed(2);
						e.validOrderNum = e.validOrderNum.toFixed(2);
						e.validCommission = e.validCommission.toFixed(2);
					});
					this.$refs['commission-count'].refresh(subData);
				})
				.done();
			if (!(this.params.startTime && this.params.endTime)) {
				this.params = {
					...this.params,
					...dateFormat(0)
				};
			}
			app.refresh({
				...this.params
			});
		},
		refresh(params, type) {
			if (type === 'labelType') {
				switch (params.labelType) {
					case 0:
						this.getLabelList();
						break;
					case 1:
						this.getLabelListOfUsers();
						break;
					case 2:
						this.getChannelLab();
						break;
				}
				this.selects.label = '';
				params.label = this.selects.label;
			}
			if (params.startTime) {
				this.params = {
					...params
				};
			}
			if (params.timeType == 0) {
				params.prop = 'tkCreateTime';
			} else if (params.timeType == 1) {
				params.prop = 'tkPaidTime';
			} else if (params.timeType == 2) {
				params.prop = 'tkEarningTime';
			}
			this.crud.refresh(params);
		},
		// 跳转详情页
		toDetail(row) {
			let newParams = {};
			if (this.params.startTime && this.params.endTime) {
				newParams = {
					startTime: this.params.startTime,
					endTime: this.params.endTime
				};
			}
			if (this.selects.labelType === 2) {
				this.$emit('showdetail', {
					relationIdss: row.relationId.join(','),
					labelName: row.label,
					labelType: this.selects.labelType,
					...newParams
				});
			} else {
				this.$emit('showdetail', {
					positionId: row.positionId.join(','),
					labelName: row.label,
					labelType: this.selects.labelType,
					...newParams
				});
			}
		},
		// 获取推广位标签列表
		getLabelList() {
			this.$service.account.extension.labelList().then(res => {
				this.options.label = res;
			});
		},
		// 获取员工标签
		getLabelListOfUsers() {
			this.$service.account.staff.labelListOfUsers().then(res => {
				this.options.label = res;
			});
		},
		getChannelLab() {
			this.$service.account.channel.labelList().then(res => {
				this.options.label = res;
			});
		},
		taobaoIdrefresh(params) {
			this.refresh({ ...params });
		},
		labelsExport() {
			this.$service.order.labelsExport(this.params).then(res => {
				download({
					data: res,
					fileName: `标签统计-${moment().format('YYYY-MM-DD HH:mm:ss')}`
				});
			});
		}
	}
};
</script>
<style lang="stylus" scoped>
.crud-index {
    padding 10px
}
.order {
    height 100%
}
.label-name {
	display block
	font-size 14px
	color: $main-color
	line-height  28px
	margin	0 10px
	min-width 60px
}
.label-type {
	margin-right 10px
}
</style>
